<script setup lang='ts'>
type IProps = {
    attributeName?: string
    isCustom?: boolean
    isRequired?: boolean
    isSale?: boolean
}

const props = withDefaults(defineProps<IProps>(), {
    attributeName: '',
    isCustom: false,
    isRequired: false,
    isSale: false,
})
const emits = defineEmits(['valueChange', 'delAttribute', 'optionsChange'])
const options = defineModel<any>('options', { required: true })
const selectData = defineModel<any>('selectData', { required: true })
const newOptions = ref()
newOptions.value = getOptionArray(options.value)

const { attributeName, isCustom, isRequired } = toRefs(props)

const isAdding = ref(false)
const optionName = ref('')
function onAddOption() {
    isAdding.value = true
}
function onConfirm() {
    if (optionName.value) {
        newOptions.value.push(
            {
                // id: optionName.value,
                label: optionName.value,
                value: optionName.value,
            },
        )
        clear()
        emits('optionsChange', newOptions.value)
    }
}

function clear() {
    optionName.value = ''
    isAdding.value = false
}

function handleChange(e, options: any) {
    const { label } = options.find((item: any) => item.value === e)
    const data = {
        // id: label,
        label,
        value: e,
    }
    console.log(data, 'data')
    emits('valueChange', data)
}
function getOptionArray(attributeValue: any) {
    const result = attributeValue ? JSON.parse(attributeValue) : []
    return result?.map((item: any) => {
        return {
            label: item.value,
            value: item.id,
        }
    }) ?? []
}

function delAttribute() {
    emits('delAttribute', attributeName.value)
}
</script>

<template>
    <el-form-item label-width="60px"
                  v-bind="$attrs"
                  :required="isRequired"
    >
        <el-space class="w-full">
            <el-select v-model="selectData"
                       placeholder="请选择"
                       @change="handleChange($event, newOptions)"
            >
                <el-option v-for="{ label, value } in newOptions"
                           :key="value"
                           :label="label"
                           :value="value"
                />

                <template #footer>
                    <el-button v-if="!isAdding"
                               text
                               bg
                               size="small"
                               @click="onAddOption"
                    >
                        添加
                    </el-button>

                    <template v-else>
                        <el-input v-model="optionName"
                                  class="option-input mb-5 w-200"
                                  placeholder="请输入属性值"
                                  size="small"
                        />

                        <el-button type="primary"
                                   size="small"
                                   @click="onConfirm"
                        >
                            确定
                        </el-button>

                        <el-button size="small"
                                   @click="clear"
                        >
                            取消
                        </el-button>
                    </template>
                </template>
            </el-select>

            <div v-if="isCustom"
                 class="text-16 text-orange-5 flex flex-none items-center"
            >
                <div class="cursor-pointer"
                     @click="delAttribute"
                >
                    <el-icon>
                        <Delete />
                    </el-icon>
                </div>
            </div>

            <!-- <div v-if="isSale"
                 class="text-16 text-orange-5 flex flex-none items-center"
            >
                销售属性
                <div i-mingcute:warning-fill
                     class="ml-4"
                />
            </div> -->
        </el-space>
    </el-form-item>
</template>

<style lang="less" scoped>
:deep(.el-space .el-space__item:first-child) {
    width: 200px;
}
</style>
